<template>
  <el-card style="height: 92vh; margin: 5px;">
    <el-container style="height: 100%; display: flex; flex-direction: column;">
      <el-header>
        <el-form inline class="search-form">
          <el-form-item  style="width: 30%">
            <el-input v-model="question" placeholder="问题"></el-input>
          </el-form-item>
          <el-form-item  style="width: 30%">
            <el-input v-model="id" placeholder="id"></el-input>
          </el-form-item>
          <el-form-item style="width: 20%">
            <el-button type="primary" @click="queryQuestion" style="width: 100%">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
            height="calc(100vh - 60px - 40px - 50px - 20px - 20px - 20px - 20px - 20px)">
          <el-table-column
              prop="question"
              width="800"
              label="题目"
              align="center">
          </el-table-column>
          <el-table-column
              prop="answer"
              width="400"
              label="答案"
              align="center">
          </el-table-column>
          <el-table-column
              prop="type"
              label="类型"
              width="60"
              align="center">
          </el-table-column>
          <el-table-column
              width="100"
              prop="author"
              label="好心人"
              align="center">
            <template #default="{ row }">
              <span v-if="row.author===null" style="color: green">好心人</span>
              <span v-else style="color: green">{{ row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="id"
              label="序号"
              width="100"
              align="center">
          </el-table-column>
          <el-table-column
              prop="state"
              label="审核状态"
              width="80"
              align="center">
            <template #default="{ row }">
              <el-switch
                  v-model="row.state"
                  @change="checkQuestion(row.id)"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              fixed="left"
              prop=""
              width="80"
              label="操作"
              align="center">
            <template #default="{ row }">
              <el-link :underline="false" @click="showUpdateForm(row)">
                <i class="el-icon-edit" style="font-size: 30px;color:#8ce380"></i>
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @next-click="handleNextClick"
            @prev-click="handlePrevClick"
            :current-page="page"
            background
            layout="sizes, prev, pager, next,jumper,total"
            :page-size="10"
            :page-sizes="[10,20,50,100]"
            :total="total">
        </el-pagination>
      </el-footer>
    </el-container>
    <el-dialog title="修改用户" v-model="dialogFormVisible" :modal-append-to-body="false">
      <el-form :model="updateForm">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="updateForm.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="问题" :label-width="formLabelWidth">
          <el-input v-model="updateForm.question" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="答案" :label-width="formLabelWidth">
          <el-input v-model="updateForm.answer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="updateForm.type" placeholder="请选择类型" style="width: 100%">
            <el-option label="游戏" value="游戏"></el-option>
            <el-option label="百科" value="百科"></el-option>
            <el-option label="奥运" value="奥运"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="updateForm.author" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="update_question">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import apiClient from '@/utils/axios'
import { ElMessage } from 'element-plus'

interface QuestionRow {
  id: number
  question: string
  answer: string
  type: string
  author: string | null
  state: boolean
}

interface UpdateForm {
  id: number | ''
  question: string
  answer: string
  type: string
  author: string
}

const page = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)

const tableData = ref<QuestionRow[]>([])

const updateForm = reactive<UpdateForm>({
  id: '',
  question: '',
  answer: '',
  type: '',
  author: '',
})

const dialogFormVisible = ref<boolean>(false)
const formLabelWidth = '120px'
const question = ref<string>('')
const id = ref<string>('')

const getTableData = () => {
  apiClient({
    url: '/user/get_question_list',
    method: 'get',
    params: {
      page: page.value,
      pageSize: pageSize.value,
    },
  })
    .then((result) => {
      if (result.data.status === 200) {
        total.value = result.data.data.total
        tableData.value = result.data.data.rows
      } else {
        ElMessage({
          message: result.data.msg,
          type: 'error',
          placement: 'top-right',
        })
      }
    })
    .catch((err) => {
      ElMessage({
        message: String(err),
        type: 'warning',
        placement: 'top-right',
      })
    })
}

const checkQuestion = (qid: number) => {
  apiClient({
    url: '/admin/check_question',
    method: 'get',
    params: {
      id: qid,
    },
  })
    .then((result) => {
      if (result.data.status === 200) {
        ElMessage({
          message: result.data.msg,
          type: 'success',
          placement: 'top-right',
        })
      } else {
        ElMessage({
          message: result.data.msg,
          type: 'error',
          placement: 'top-right',
        })
      }
    })
    .catch((err) => {
      ElMessage({
        message: String(err),
        type: 'warning',
        placement: 'top-right',
      })
    })
}

const showUpdateForm = (row: QuestionRow) => {
  updateForm.id = row.id
  updateForm.question = row.question
  updateForm.answer = row.answer
  updateForm.type = row.type
  updateForm.author = row.author || ''
  dialogFormVisible.value = true
}

const update_question = () => {
  apiClient({
    url: '/admin/update_question',
    method: 'put',
    data: {
      id: updateForm.id,
      question: updateForm.question,
      answer: updateForm.answer,
      type: updateForm.type,
      author: updateForm.author,
    },
  }).then((result) => {
    if (result.data.status === 200) {
      ElMessage({
        message: result.data.msg,
        type: 'success',
        placement: 'top-right',
      })
      dialogFormVisible.value = false
      getTableData()
    } else {
      ElMessage({
        message: result.data.msg,
        type: 'error',
        placement: 'top-right',
      })
    }
  })
}

const queryQuestion = () => {
  page.value = 1

  apiClient
    .get('/admin/query_question', {
      params: {
        id: id.value,
        question: question.value,
      },
    })
    .then((result) => {
      if (result.data.status === 200) {
        tableData.value = result.data.data.rows
        total.value = result.data.data.total
      } else {
        ElMessage({
          message: result.data.msg,
          type: 'error',
          placement: 'top-right',
        })
      }
    })
    .catch((err) => {
      ElMessage({
        message: String(err),
        type: 'error',
        placement: 'top-right',
      })
    })
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val: number) => {
  page.value = val
  getTableData()
}

const handleNextClick = (val: number) => {
  page.value = val
  getTableData()
}

const handlePrevClick = (val: number) => {
  page.value = val
  getTableData()
}

onMounted(() => {
  getTableData()
})
</script>
<style scoped>

</style>